<script lang="ts" setup>
import { computed } from "vue";

const props = withDefaults(defineProps<{ cols?: number; colGap?: number; rowGap?: number }>(), {
  cols: 1,
});

const styles = computed(() => ({
  gridTemplateColumns: `repeat(${props.cols}, 1fr)`,
  columnGap: `${props.colGap}px`,
  rowGap: `${props.rowGap}px`,
}));
</script>

<template>
  <div class="umi-grid" :style="styles">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.umi-grid {
  display: grid;
}
</style>
